﻿﻿
<template>
  <div class="login-wrapper" :style="{ backgroundImage: 'url(' + bgImage + ')' }">
    <div class="register-div">


      <h1> 用户注册 </h1>

      {{ error }}

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="用户名" prop="userName">

          <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">

          <el-input type="text" v-model="ruleForm.realName" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="密码" prop="pwd">

          <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="性别" prop="sex">

          <el-radio-group v-model="ruleForm.sex">

            <el-radio label="男"></el-radio>

            <el-radio label="女"></el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item label="手机号" prop="phone">

          <el-input v-model.number="ruleForm.phone"></el-input>

        </el-form-item>

        <div v-if="showInput">

          <el-form-item label="资质证图片">

            <img src="" id="aptitudeImg" width="100" height="100">

            <input type="file" name="face" id="aptitudeImgFile" @change="aptitudeImgChange()">

          </el-form-item>

          <el-form-item label="身份证图片">

            <img src="" id="idImage" width="100" height="100">

            <input type="file" name="face" id="idImageFile" @change="idImageChange()">

          </el-form-item>

          <el-form-item label="公司名称" prop="age">

            <el-input v-model.number="ruleForm.firm"></el-input>

          </el-form-item>

        </div>

        <el-form-item>

          <el-button v-if="kuaisubutton" type="primary" @click="kuaisuform()">提交</el-button>

          <el-button v-if="buquanbutton" type="primary" @click="buquanform()">提交</el-button>

          <el-button @click="resetForm()">重置</el-button>

          <el-button type="primary" @click="show()">{{ buquan }}</el-button>

        </el-form-item>

      </el-form>

    </div>
  </div>

</template>


<script>

import axios from "axios";


export default {

  data() {

    return {
      bgImage: 'http://hzx.ezy2.top/upload/1.webp',
      ruleForm: {

        userName: '',

        realName: '',

        pwd: '',

        sex: '男',

        phone: '',

        firm: '',

      },

      rules: {

        userName: [

          {required: true, message: '请输入用户名', trigger: 'blur'},

          {patten: /^[a-zA-Z]{3,6}$/, message: "长度为3-6位的英文字母", trigger: 'blur'}

        ],

        realName: [

          {required: true, message: '请输入真实姓名', trigger: 'blur'},

          {min: 2, max: 6, message: "长度在2-6位", trigger: 'blur'}

        ],

        pwd: [

          {required: true, message: '请输入用户名', trigger: 'blur'},

          {patten: /^[0-9]{6}$/, message: "密码需要6位数字", trigger: 'blur'}

        ],

        phone: [

          {required: true, message: '请输入用户名', trigger: 'blur'},


        ],

      },

      showInput: false,

      buquan: '补全资料',

      error: '',

      aptitudeImgFile: '',

      idImageFile: '',

      kuaisubutton: true,

      buquanbutton: false,

    }

  },

  methods: {

    resetForm() {

      this.ruleForm.realName = '';

      this.ruleForm.userName = '';

      this.ruleForm.pwd = '';

      this.ruleForm.phone = '';

      this.ruleForm.firm = '';

    },

    kuaisuform() {

      if (this.ruleForm.userName == '' || this.ruleForm.realName == '' || this.ruleForm.pwd == ''
          || this.ruleForm.phone == '') {
        this.$message({
          message: "信息不能为空",
          type: "error",
          showClose: true,
        });
      } else {
        // 提交注册信息

        axios.get("/project/user/fastRegister", {

          params: this.ruleForm

        }).then(resp => {

          if (resp.data.tag == "0") {

            this.$router.push("/")

          } else {

            this.error = resp.data.json

          }

        })

      }
    },

    buquanform() {
      if (this.ruleForm.userName == '' || this.ruleForm.realName == '' || this.ruleForm.pwd == ''
          || this.ruleForm.phone == '' || this.ruleForm.firm == ''||this.aptitudeImgFile==''||this.idImageFile=='') {

        this.$message({
          message: "信息不能为空",
          type: "error",
          showClose: true,
        });
      } else {
        let paramObj = new FormData;
        paramObj.append("realName", this.ruleForm.realName)
        paramObj.append("userName", this.ruleForm.userName)
        paramObj.append("sex", this.ruleForm.sex)
        paramObj.append("pwd", this.ruleForm.pwd)
        paramObj.append("phone", this.ruleForm.phone)
        paramObj.append("aptitudeImg", document.getElementById("aptitudeImg").src);
        paramObj.append("idImage", document.getElementById("idImage").src);
        paramObj.append("firm", this.ruleForm.firm);
        console.log(this.aptitudeImgFile)
        axios.post("/project/user/replenishUserInfo", paramObj).then(resp => {
          if (resp.data.tag == "0") {
            this.$router.push("/")
          } else {
            this.error = resp.data.json
          }
        })
      }
    },

    show() {

      this.showInput = !this.showInput;

      if (!this.showInput) {

        this.buquan = "补全资料"

        this.kuaisubutton = true

        this.buquanbutton = false

      } else {

        this.buquan = "取消"

        this.kuaisubutton = false

        this.buquanbutton = true

      }

    },

    aptitudeImgChange() {

      let reader = new FileReader();//定义文件读取流对象

      reader.readAsDataURL(document.getElementById("aptitudeImgFile").files[0]);

      reader.onload = function (ev) {

        document.getElementById("aptitudeImg").src = ev.target.result;

        this.aptitudeImgFile = ev.target.result

        console.log(this.aptitudeImgFile)

      }

    },

    idImageChange() {

      let reader = new FileReader();//定义文件读取流对象

      reader.readAsDataURL(document.getElementById("idImageFile").files[0]);

      reader.onload = function (ev) {

        document.getElementById("idImage").src = ev.target.result;

        console.log(ev.target.result)

      }

    },

  }

}

</script>


<style scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
}

.register-div {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

</style>